<!DOCTYPE html>
<html style="height: 100%">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title></title>
		<style type="text/css">
			@media screen and (max-width:2000px) {
				
			}
			@media screen and (max-width:1680px) {
				.img-first{
					
					position: absolute;left:16vw;top:79vh
				}
				.img-sen{
					position: absolute;left:36vw;top:79vh
				}
				.img-thr{
					position: absolute;left:56vw;top:79vh
				}
				.img-last{
					position: absolute;left:76vw;top:79vh
				}
				
			}
			@media screen and (max-width:1600px) {
				
				.img-first{
					width:6vw;
					position: absolute;left:18vw;top:75vh
				}
				.img-sen{
					width:6vw;
					position: absolute;left:38vw;top:75vh
				}
				.img-thr{
					width:6vw;
					position: absolute;left:58vw;top:75vh
				}
				.img-last{
					width:6vw;
					position: absolute;left:78vw;top:75vh
				}
				/* .icon-size{
					width:8vw;
					font-size:8px;
					margin-right:1vw;
					height:7vh;
					line-height:7vh;
				} */
			}
			@media screen and (max-width:1440px) {
				.icon-size{
					font-size:6px;
					margin-right:4vw;
				}
				/* .icon-img{
					width:5vw;
					margin-right:1vw;
					margin-left:-3vw!important;
				} */
				.question p:first-child{
					width:55vw;
					height:8vh;
					/* border:1px solid #ccc; */
					margin-left:8vw;
					font-size:1vh;
					color: #fff;
					line-height: 9vh;
				}
				.question p:last-child{
					width:33vw;
					height:8vh;
					font-size:1vh;
					color: #FFF;
					line-height: 8vh;
				}
			}
			@media screen and (max-width:1400px) {
				.icon-size{
					width:10vw;
					font-size:1vh;
					margin-right:4vw;
				}
				.icon-img{
					width:8vw;
					margin-right:1vw;
					margin-left:-3vw!important;
				}		
			}
			@media screen and (max-width:1366px) {
				.icon-size{
					font-size:8px;
					margin-right:4.3vw;
				}
				.icon-img{
					width:5vw;
					margin-right:1vw;
					margin-left:-3vw!important;
				}
			}
			@media screen and (max-width:1360px) {
						
			}
			*{margin:0;padding:0;font-family:'微软雅黑';}
			.icon-img{
				width:4vw;
				float:left;
			}
			.icon-size{
				display: block;
				height:10vh;
				width:10vw;
				line-height:10vh;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				margin-left:10vw
			}
			#container2{
					width:90vw;
					height:70vh;
					margin-top:17vh;
					margin-left:5vw
				}
			a{
					text-decoration: none;
					color: #fff;
				}
				.question{
					display: flex;
					justify-content: space-between;
					font-size: 12px;
				}
				.question p:first-child{
					width:60vw;
					height:9vh;
					/* border:1px solid #ccc; */
					margin-left:8vw;
					font-size:12px;
					color: #fff;
					line-height: 9vh;
					font-family:'微软雅黑';
				}
				.question p:last-child{
					width:30vw;
					height:9vh;
					font-size:10px;
					color: #FFF;
					line-height: 9vh;
					font-family:'微软雅黑';
				}
				.img-first{
					position: absolute;left:13.5vw;top:79vh
				}
				.img-sen{
					position: absolute;left:35vw;top:79vh
				}
				.img-thr{
					position: absolute;left:55vw;top:79vh
				}
				.img-last{
					position: absolute;left:75vw;top:79vh
				}
				.highcharts-yaxis-labels text{
					fill:#fff!important
				}
				.highcharts-yaxis-labels text{
					fill:#fff!important
				}
		</style>
	</head>
	<body style="position: relative;">
		<div class="question">
			<!-- <p>问题排行榜</p> -->
			<p>Today's skin problem ranking</p>
			<p>Quantity：people</p>
			<!-- <p>数量：人</p> -->
		</div>
		<div id="container2"></div>
		
	     <div>
			<img src="../img/1.png" class="img-first">
			<img src="../img/2.png"  class="img-sen">
			<img src="../img/3.png"  class="img-thr">
			<img src="../img/4.png" class="img-last">
		</div>
		<!-- <script src="https://code.highcharts.com/highcharts.js"></script> -->
		<script src="http://cdn.hcharts.cn/highstock/highstock.js"></script> 
		<script src="https://code.highcharts.com/highcharts-3d.js"></script>
		<script src="https://code.highcharts.com/modules/cylinder.js"></script>
		<script src="https://code.highcharts.com/modules/exporting.js"></script>
		<script src="https://code.highcharts.com/modules/export-data.js"></script>
		<!-- <script src="https://img.highcharts.com.cn/highcharts/highcharts.js"></script> -->
		<script src="https://img.highcharts.com.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.highcharts.com.cn/highcharts/modules/variable-pie.js"></script>
		 <script src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript">
		
			// $(function () {
// 				 $(function () {
// 					//初始化数据
// 					time();
// 					setInterval(time, 8000);
// 				});
				// function time(){	
				var num=[]
				var ddata=[]
				var categoryLinks= new Array();
				$.ajax({
					type: 'get',
					url: 'http://192.168.1.27:8080/MetisManage/dataAuth/findTodayTop4',
					data:{languagename:"en"},
					success: function (res) {   
						var data=res.records
						var images=['../img/1.png','../img/2.png','../img/3.png','../img/4.png']	
						// console.log(data,'00')
						for(var i = 0; i<data.length;i++){
							// console.log(data[i].name)
							num.push(data[i].num);
							ddata.push(data[i].name);
							for(var a = 0;a<images.length;a++){
								
							}
							var objurl={
								'name':data[i].name,'url':images[i]
							}
							categoryLinks.push(objurl)	
						}
						// console.log(categoryLinks)
						num.sort(function(a,b){
							if(a>b){
								return -1;
							}
							if(a<b){
							   return 1;
							}
							return 0;
					})
					var sortdata=num.slice(0,4)
				
					var dataa = new Array();
					var colors=['#0ba8ed','#275eff','#7e49fd','#1cb0f6']
					for (var i=0;i<sortdata.length;i++) {
						for(var j=0;j<colors.length;j++){
						}
						var obj={
							'color':colors[i],'y':sortdata[i]
						}	
						dataa.push(obj)
					}
					chart.series[0].setData(dataa);//数据
				   }
				});
				var chart = new Highcharts.Chart('container2', {
				  chart: {
					  
					 backgroundColor: 0,//背景颜色
					type: 'cylinder',
					// plotBackgroundImage: '../img/1.png',
					 options3d: {//柱体的形成和角度的设置
						  enabled: true,
						  alpha: 20,
						  beta: 0,
						  depth: 0,
						  viewDistance:-90
					 }
				  },
				tooltip : {
					enabled : false,//鼠标滑过的时候的提示默认显示
				},
			    title: { //标题
					text: null 
				},
				legend:{//底部副标题
					enabled: false
				},
// 				
			  series: [{
                itemStyle: {
			        normal: {
			        },
			    },
				  data:[],
				  dataLabels: {
				  	enabled: true ,//设置显示对应y的值
				  	  style : {
				  		fontSize : '12px',
				  		color:'#fff',
						align: 'top',
						x: 0,
						y: 5,
				  	}},	
			  }],
			  credits: {  
				enabled: false     //不显示LOGO 
			   }, 
				yAxis: {
						lineColor: "#ccc",// Y轴的颜色
						lineWidth:1,// Y轴的宽度
						gridLineWidth: 0.1,// 横向格线宽度
						opposite:false,//刻度在右边显示
						min:0,
						// max:500,
						// tickPositions: [0, 20, 40, 60] ,//刻度线
						 // splitNumber: 10,//y轴分为几个刻度线
						title: {
							text: null,//控制y轴的值
							style: { color: '#fff' }
						},	
					},
					xAxis: {
					  categories:ddata,
						lineWidth :0,//去掉x轴线
						gridLineWidth: 0,// 横向格线宽度
						tickWidth:0,//去掉刻度
						lineWidth:0,
						 gridLineColor: '#FFFFFF',
						labels: {
							useHTML:true,
							// enabled:true,//数值
					   rotation: 0, //倾斜的角度
						formatter: function () {
                          return '<a href="javascript:;"  class="icon-size">' +this.value+'</a>';  
							}
						},
					},
					exporting: {//右上角菜单标志的隐藏
							enabled:false
					},
						
					});
				// });	
			// }		
				
		</script>
	</body>
</html>
